<template>
  <div class="ruijie-main">
    <div class="ruijie-main-header-con">
      <div class="ruijie-main-header">
        <div class="logo">
          <img src="../assets/logo.png">
        </div>
        <Header/>
      </div>
      <div
        class="ruijie-main-tags-con"
        :style="{marginLeft:menuWidth+'px'}">
        <tages-page-opened :page-tags-list="pageOpenedList"/>
      </div>
    </div>
    <div class="ruijie-sider-menu-con" >
      <Menu :menu-list="menuList"/>
    </div>
    <div
      class="ruijie-main-page-con"
      :style="{left:menuWidth+'px'}" >
      <div class="ruijie-main-single-page">
        <keep-alive :include="cachePage">
          <router-view/>
        </keep-alive>
      </div>

    </div>
  </div>
</template>
<script type="es6">
import Menu from '../components/main-components/menu';
import Header from '../components/main-components/header';
import tagesPageOpened from '../components/main-components/tagesPageOpened';
import {mapState} from 'vuex';
import {openNewPage} from '../libs';
export default {
  data () {
    return {

    };
  },
  components: {
    Menu,
    tagesPageOpened,
    Header
  },
  computed: {
    ...mapState({
      menuWidth: state => state.app.menuWidth,
      cachePage: state => state.app.cachePage,
      menuList: state => state.app.menuList,
      pageOpenedList: state => state.app.pageOpenedList
    })
  },
  methods: {
    init () {
      this.$store.commit('updateMenulist');
    },
    checkTag (to) {
      let openpageHasTag = this.pageOpenedList.some(item => {
        if (item.name === name) {
          return true;
        }
      });

      if (!openpageHasTag) { //  解决关闭当前标签后再点击回退按钮会退到当前页时没有标签的问题
        openNewPage(this, to, this.$route.params || {}, this.$route.query || {});
      }
    }
  },
  mounted () {
    this.init();
  },
  watch: {
    '$route' (to) {
      this.$store.commit('setCurrentPageName', to.name);
      // let pathArr = util.setCurrentPath(this, to.name);
      this.checkTag(to);
      localStorage.currentPageName = to.name;
    }
  },
  created () {
    // 显示打开的页面的列表
    this.$store.commit('setOpenedList');
    this.$store.commit('initCachepage');
  }
};
</script>
<style lang="less">
    @import "../styles/main.less";
</style>
